"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _utils = require("../utils");

var _event = require("../utils/dom/event");

var _touch = require("../mixins/touch");

var _icon = _interopRequireDefault(require("../icon"));

var _createNamespace = (0, _utils.createNamespace)('rate'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

function getRateStatus(value, index, allowHalf) {
    if (value >= index) {
        return 'full';
    }

    if (value + 0.5 >= index && allowHalf) {
        return 'half';
    }

    return 'void';
}

var _default = createComponent({
    mixins: [_touch.TouchMixin],
    props: {
        size: [Number, String],
        gutter: [Number, String],
        readonly: Boolean,
        disabled: Boolean,
        allowHalf: Boolean,
        value: {
            type: Number,
            default: 0
        },
        icon: {
            type: String,
            default: 'star'
        },
        voidIcon: {
            type: String,
            default: 'star-o'
        },
        color: {
            type: String,
            default: '#ffd21e'
        },
        voidColor: {
            type: String,
            default: '#c7c7c7'
        },
        disabledColor: {
            type: String,
            default: '#bdbdbd'
        },
        count: {
            type: Number,
            default: 5
        },
        touchable: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        list: function list() {
            var list = [];

            for (var i = 1; i <= this.count; i++) {
                list.push(getRateStatus(this.value, i, this.allowHalf));
            }

            return list;
        },
        sizeWithUnit: function sizeWithUnit() {
            return (0, _utils.addUnit)(this.size);
        },
        gutterWithUnit: function gutterWithUnit() {
            return (0, _utils.addUnit)(this.gutter);
        }
    },
    mounted: function mounted() {
        this.bindTouchEvent(this.$el);
    },
    methods: {
        select: function select(index) {
            if (!this.disabled && !this.readonly && index !== this.value) {
                this.$emit('input', index);
                this.$emit('change', index);
            }
        },
        onTouchStart: function onTouchStart(event) {
            var _this = this;

            if (this.readonly || this.disabled || !this.touchable) {
                return;
            }

            this.touchStart(event);
            var rects = this.$refs.items.map(function (item) {
                return item.getBoundingClientRect();
            });
            var ranges = [];
            rects.forEach(function (rect, index) {
                if (_this.allowHalf) {
                    ranges.push({
                        score: index + 0.5,
                        left: rect.left
                    }, {
                        score: index + 1,
                        left: rect.left + rect.width / 2
                    });
                } else {
                    ranges.push({
                        score: index + 1,
                        left: rect.left
                    });
                }
            });
            this.ranges = ranges;
        },
        onTouchMove: function onTouchMove(event) {
            if (this.readonly || this.disabled || !this.touchable) {
                return;
            }

            this.touchMove(event);

            if (this.direction === 'horizontal') {
                (0, _event.preventDefault)(event);
                var clientX = event.touches[0].clientX;
                this.select(this.getScoreByPosition(clientX));
            }
        },
        getScoreByPosition: function getScoreByPosition(x) {
            for (var i = this.ranges.length - 1; i > 0; i--) {
                if (x > this.ranges[i].left) {
                    return this.ranges[i].score;
                }
            }

            return this.allowHalf ? 0.5 : 1;
        },
        genStar: function genStar(status, index) {
            var _this2 = this;

            var h = this.$createElement;
            var icon = this.icon,
                color = this.color,
                count = this.count,
                voidIcon = this.voidIcon,
                disabled = this.disabled,
                voidColor = this.voidColor,
                disabledColor = this.disabledColor;
            var score = index + 1;
            var isFull = status === 'full';
            var isVoid = status === 'void';
            var style;

            if (this.gutterWithUnit && score !== count) {
                style = {
                    paddingRight: this.gutterWithUnit
                };
            }

            return h("div", {
                "ref": "items",
                "refInFor": true,
                "key": index,
                "attrs": {
                    "role": "radio",
                    "tabindex": "0",
                    "aria-setsize": count,
                    "aria-posinset": score,
                    "aria-checked": String(!isVoid)
                },
                "style": style,
                "class": bem('item')
            }, [h(_icon.default, {
                "attrs": {
                    "size": this.sizeWithUnit,
                    "name": isFull ? icon : voidIcon,
                    "data-score": score,
                    "color": disabled ? disabledColor : isFull ? color : voidColor
                },
                "class": bem('icon'),
                "on": {
                    "click": function click() {
                        _this2.select(score);
                    }
                }
            }), this.allowHalf && h(_icon.default, {
                "attrs": {
                    "size": this.sizeWithUnit,
                    "name": isVoid ? voidIcon : icon,
                    "data-score": score - 0.5,
                    "color": disabled ? disabledColor : isVoid ? voidColor : color
                },
                "class": bem('icon', 'half'),
                "on": {
                    "click": function click() {
                        _this2.select(score - 0.5);
                    }
                }
            })]);
        }
    },
    render: function render() {
        var _this3 = this;

        var h = arguments[0];
        return h("div", {
            "class": bem({
                readonly: this.readonly,
                disabled: this.disabled
            }),
            "attrs": {
                "tabindex": "0",
                "role": "radiogroup"
            }
        }, [this.list.map(function (status, index) {
            return _this3.genStar(status, index);
        })]);
    }
});

exports.default = _default;